<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<image class="price" src="../../../static/日期.png"></image>
			<text class="custom-btn" style="margin-top: 3px;">自定义</text>
		</view>

		<!-- 日期切换按钮 -->
		<view class="date-toggle">
			<view class="date-btn" :class="{ active: selectedDate === 'today' }" @click="switchDate('today')">
				今天
			</view>
			<view class="date-btn" :class="{ active: selectedDate === 'yesterday' }" @click="switchDate('yesterday')">
				昨天
			</view>
		</view>

		<!-- 收入及订单量 -->
		<view class="stats">
			<view class="stat-item">
				<text class="income">¥ {{ income.toFixed(2) }}</text><br/>
				<text class="label">收入</text>
			</view>
			<view class="stat-item">
				<text class="order">{{ orders }}</text><br/>
				<text class="label">订单量</text>
			</view>
		</view>

		<!-- 收入分布 -->
		<view class="chart-section">
			<text class="chart-title">收入分布</text>
			<canvas canvas-id="incomePieChart" class="pie-chart"></canvas>
			<view class="legend">
				<view class="legend-item">
					<view class="color-box" style="background-color: #1D6FFF;"></view>
					<text>保养</text>
				</view>
				<view class="legend-item">
					<view class="color-box" style="background-color: #FB8E0B;"></view>
					<text>洗车</text>
				</view>
			</view>
		</view>

		<!-- 订单分布 -->
		<view class="chart-section">
			<text class="chart-title">订单分布</text>
		

			    <qiun-data-charts 
			      type="column" 
			      :opts="opts" 
			      :chartData="chartData" 
			    />

		</view>
		
	</view>
	
</template>

<style>
	.container {
		padding: 4px;
		text-align: center;
	}

	.header {
		display: flex;
		justify-content: flex-end;
		padding: 2px;
	}

	.price {
		width: 20px;
		height: 20px;
	}

	.custom-btn {
		font-size: 12px;
		color: #05AAF4;
		font-weight: bold;
	}

	.date-toggle {
		display: inline-flex;
		border: 1px solid #007aff;
		border-radius: 5px;
		overflow: hidden;
		margin-top: 10px;
	}

	.date-btn {
		padding: 10px 20px;
		cursor: pointer;
	}

	.active {
		background-color: #007aff;
		color: white;
	}

	.stats {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	.stat-item {
		text-align: center;
	}

	.income {
		color: #007aff;
		font-size: 24px;
	}

	.order {
		color: #5bb8a5;
		font-size: 24px;
	}

	.label {
		color: #888;
	}

	.chart-section {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 0px;
	}

	.chart-title {
		font-size: 16px;
		margin-bottom: 10px;
		font-weight: 800;
		margin-left: -270px;
	}

	.pie-chart {
		width: 100%;
		height: 200px;
	}

	.legend {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-left: 10px;
	}

	.legend-item {
		display: flex;
		align-items: center;
		margin-left: 270px;
		margin-top: -50px;
	}

	.color-box {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}
</style>

<script>
	export default {
		data() {
			return {
				opts: {
				        // 其他配置项
				        xAxis: {
				          disableGrid: false,
				          data: ["维修","保养","洗车"] // 横轴标签
				        },
				        yAxis: {
				          data: [
				            { min: 0 }
				          ]
				        }
				      },
				  chartData: {
						  categories: ["维修","保养","洗车"], // 横轴标签
						  series: [
							{
							  name: '订单量',
							  data: [345,145,230]
							}
						  ]
						},
				selectedDate: 'today',
				income: 414254.23,
				orders: 5355,
				yesterdayData: {
					income: 300000.0,
					orders: 4500,
				},
			};
		},

		onReady() {
			this.drawPieChart();
			this.drawBarChart();
		},

		methods: {
			switchDate(date) {
				this.selectedDate = date;
				if (date === 'yesterday') {
					this.income = this.yesterdayData.income;
					this.orders = this.yesterdayData.orders;
				} else {
					this.income = 414254.23; // 今日的数据
					this.orders = 5355; // 今日的数据
				}
				this.drawPieChart();
				this.drawBarChart(); // 切换后重绘柱状图
			},

			drawPieChart() {
				const ctx = uni.createCanvasContext('incomePieChart');
				const data = [35, 56]; // 保养和洗车的金额
				const colors = ['#1D6FFF', '#FB8E0B'];
				const total = data.reduce((acc, val) => acc + val, 0);
				let startAngle = -Math.PI / 2; // 逆时针旋转90度

				data.forEach((value, index) => {
					const endAngle = startAngle + (value / total) * (2 * Math.PI);
					ctx.beginPath();
					ctx.moveTo(100, 100); // 饼图中心
					ctx.arc(100, 100, 80, startAngle, endAngle);
					ctx.setFillStyle(colors[index]);
					ctx.fill();
					startAngle = endAngle;
				});

				// 添加标注
				ctx.setFillStyle('#000');
				ctx.fillText('保养425元', 120, 80);
				ctx.fillText('洗车56元', 20, 100);

				ctx.draw();
			},
		},
	};
</script>
